<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<link rel="stylesheet"  href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/style.css" >
<body>

	<div class="header" style="position: relative;">
		<div class="warpper">
			<h2><span class="iconfont icon-fanhui" style="float: left;margin-left: 30px;font-size: 20px;"></span>请选择你的省份</h2>
		</div>
			<!-- 省 -->
			<div class="province item" >
				<button>广西</button>
				<button>广东</button>
				<button>河南</button>
				<button>安徽</button>
				<button>甘肃</button>
			</div>
			<!-- 市 -->
			<div class="city item" style="display: none;position: absolute;margin-left: 400px;height: 200px;width: 300px;top:70px;border: 1px solid blue;">
				<button>柳州</button>
				<button>玉林</button>
				<button>桂林</button>
				<button>广州</button>
				<button>珠海</button>
				<button>河北</button>
				
			</div>
			<!-- 区 -->
			<div class="area item" style="display: none;position: absolute;left:740px;height:100px;width:300px;top:70px;border: 1px solid blue;">
				<button>鱼峰区</button>
				<button>柳南区</button>
				<button>良庆区</button>
				<button>老城区</button>

			</div>
	</div>
<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">

	$('.icon-fanhui').click(function(){
		
		/*city 框的显隐状态*/

		var cflag = $('.city').css('display');
		/*area*/
		var aflag = $('.area').css('display');

		if (cflag=='block' && aflag=='block') {
			$('.area').hide();
		}

		if (cflag=='block' && aflag=='none') {
			$('.city').hide();
		} 

		console.log('city 的显/隐状态'+cflag);
	})
	/*初始化省份DIV框
	1.先把省份DIV框中的静态数据移除掉*/
   function showarea(btn){
/*获取城市按钮的VALUE值*/
   	var cid = $(btn).val();
/*隐藏province,area 这两个div，同时展示city面板内容*/
  		$('.province').show();
		$('.area').show();
		$('.city').show();
/*获取过滤数据*/
		$.get('json/area.json',function(res){
/*过滤数据*/
			var tmp=[];

			for(var i=0;i<res.length;i++){
				if(cid == res[i].pid){
					tmp.push(res[i]);
				}
			}
			/*显示数据*/
			$('.area').empty();
			for(var i=0;i<tmp.length;i++){
				var btn = '<button onclick="hider()" value="'+tmp[i].id+'">'+tmp[i].name+'</button>'; 
				$('.area').append(btn);
		}
	})

 }
	function showcity(btn){

		
		var pid = $(btn).val();
		console.log("省份id==="+pid);
		/*隐藏province,area这两个div,同时展示city面板内容*/
		$('.province'). show();
		$('.area').hide();
		$('.city').show();
		/*获取所有城市信息并过滤*/
		$.get('json/city.json ',function(res){
			/*过滤城市数据*/
			var tmp = [];
			for(var i=0;i<res.length;i++){
				if(pid == res[i].pid){
					tmp.push(res[i]);
				}
			}

				/*过滤城区数据*/
		
			/*将省份下面的城市显示到.city div下面*/
			$('.city').empty();
			for(var i=0;i<tmp.length;i++){
				var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>'; 
				$('.city').append(btn);
			}

		})

	}

	function InitProvince(){

		$('.province').empty();

		$.get('json/province.json',function(res){

			for(var i=0;i<res.length;i++){
				/*用字符串拼接一个button*/
				var btn='';

				btn = '<button  onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>'; 
				$('.province').append(btn);
			}
		});
	}

	InitProvince();

	function hider(){
		$('.city').hide();
		$('.area').hide();
	}


</script>
</body>
</html>